<template>
<div>
    <header class="header">
      <figure>
        <div  class="public">
          <div>
            <img src="http://img2.imgtn.bdimg.com/it/u=2159481810,3897864870&fm=27&gp=0.jpg" alt="">
          </div>
        </div>
      </figure>
      <div>
          <i class="iconfont icon-magnifier"></i>
          <span>找你喜欢的商品</span>
      </div>
      <div>
          <i class="iconfont icon-money-o"></i>
          <i class="iconfont icon-tubiaolunkuo-"></i>
      </div>
    </header>
    <main class="swiper1">
      <swiper :options="swiperOption1" ref="mySwiper">
        <swiper-slide><img src="../../static/images/banner5.png"/></swiper-slide>
        <swiper-slide><img src="../../static/images/banner6.png"/></swiper-slide>
        <swiper-slide><img src="../../static/images/banner7.png"/></swiper-slide>
      </swiper>
    </main>
    <div class="wrap">
      <dl v-for="(v,i) in wrap" :key="i">
        <dt><img :src="v.imgUrl" alt=""></dt>
        <dd>{{v.dd}}</dd>
      </dl>
    </div>
    <div class="week">
      <p>最新上架</p>
      <p>全部 > </p>
    </div>
    <div class="newBanner">
      <div>
        <img src="../../static/images/newBanner.png" alt="">
      </div>
      <div>
        <img src="../../static/images/newBanner.png" alt="">
        <img src="../../static/images/newBanner.png" alt="">
      </div>
    </div>
    <div class="week">
      <p>什么值得买</p>
      <p>全部 > </p>
    </div>
    <div class="recommended">
      <div>
        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2664952939,3620851655&fm=27&gp=0.jpg" alt="">
        <p>什么值得买：没有帅大叔斯维因Hol...</p>
      </div>
      <div>
        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1016287085,3994185619&fm=27&gp=0.jpg" alt="">
        <p>什么值得买：你绝对错过的洛霞...</p>
      </div>
    </div>
    <div class="week">
      <p>推荐英雄</p>
      <p></p>
    </div>
    <div class="recommended1">
      <img src="../../static/images/img1.png" alt="">
      <img src="../../static/images/img1.png" alt="">
      <img src="../../static/images/img1.png" alt="">
    </div>
    <div class="week">
      <p>推荐皮肤</p>
      <p></p>
    </div>
    <div class="recommended1">
      <img src="../../static/images/img2.png" alt="">
      <img src="../../static/images/img2.png" alt="">
      <img src="../../static/images/img2.png" alt="">
    </div>
    <div class="week">
      <p>周边推荐</p>
      <p></p>
    </div>
    <div class="recommended1">
      <img src="../../static/images/img3.png" alt="">
      <img src="../../static/images/img3.png" alt="">
      <img src="../../static/images/img3.png" alt="">
    </div>
</div>
</template>
<script>
export default {
  data () {
    return{
      wrap:[
        {imgUrl:"../../static/images/wrap1.png",dd:"赛程订阅"},
        {imgUrl:"../../static/images/wrap2.png",dd:"赛事视频"},
        {imgUrl:"../../static/images/wrap3.png",dd:"俱乐部"},
        {imgUrl:"../../static/images/wrap4.png",dd:"赛况数据"},
        {imgUrl:"../../static/images/wrap5.png",dd:"竞猜"},
      ],
      swiperOption1: {
        slidesPerView :'auto',
        autoplay: 1000,
        slidesPerView: 1.4,
        centeredSlides: true,
        loop:true,
        spaceBetween: 10,
      },
    }
  }
}
</script>
<style scoped lang="less">
.px2rem(@name,@px){
  @{name}: @px / 75 * 1rem;
}
.header{
  @h: 45px;
  z-index: 99;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: @h;
  display: flex;
  justify-content:space-between;
  background: #265A96;
  // box-shadow: 0 3px 5px #ccc;
  figure{
    position: relative;
    z-index: 999;
    width: @h;
    display: flex;
    align-items: center;
    width:45px;
    height:45px;
    .px2rem(margin-left,30);
    .public{
      width:35px;
      height:35px;
      img{
        border-radius: 50%;
        width:100%;
      }
    }
  }
  &>div:nth-child(2){
    flex:1;
    display: flex;
    line-height:35px;
    height: 34px;
    margin-top: 5px;
    background: rgba(255, 255, 255, .1);
    color: white;
    .px2rem(font-size,25);
    .px2rem(border-radius,10);
    i{
        .px2rem(padding-left,20);
        .px2rem(padding-right,20);
    }
  }
  &>div:last-child{
    display:flex;
    align-items: center;
    color: #FCBB7B;
    i{
      .px2rem(padding-left,15);
      .px2rem(font-size,50);
    }
    &>i:last-child{
      .px2rem(font-size,45);
      .px2rem(padding-right,15);
    }
  }  
}
.swiper1{
  margin-top:45px;
  background: #265A96;
  img{
    width:100%;
  }
}
.wrap{
	.px2rem(margin-left,30);
	.px2rem(margin-right,30);
	border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-between;
	dl{
		flex:1;
		dt{
			width:60%;
			margin-left: 20%;
			.px2rem(margin-top,20);
			.px2rem(margin-bottom,20);
			img{
				width:100%;
			}
		}
		dd{
			color:#999;
			text-align: center;
			.px2rem(font-size,25);
			.px2rem(margin-bottom,20);
		}
  }
}
.week{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .px2rem(height,80);
  .px2rem(padding-left,30);
  .px2rem(padding-right,30);
  .px2rem(font-size,30);
  p:nth-child(2){
    .px2rem(font-size,25);
    color:#666;
  }
}
.newBanner{
  display: flex;
  .px2rem(margin-left,30);
  .px2rem(margin-right,30);
  .px2rem(padding-bottom,25);
  border-bottom:1px solid #ccc;
  &>div:first-child{
    width:65%;
    .px2rem(padding-right,10);
    img{
      width:100%;
      height:100%;
      .px2rem(border-radius,10);
    }
  }
  &>div:last-child{
    flex:1;
    .px2rem(padding-left,10);
    img{
      width:100%;
      .px2rem(border-radius,10);
      display: block;
    }
    &>img:first-child{
      .px2rem(margin-bottom,10);
    }
    &>img:last-child{
      .px2rem(margin-top,10);
    }
  }
}
.recommended{
  display: flex;
  .px2rem(margin-left,30);
  .px2rem(margin-right,30);
  .px2rem(padding-bottom,25);
  border-bottom: 1px solid #ccc;
  div{
    position: relative;
    flex:1;
    .px2rem(margin-right,10);
    img{
      width:100%;
      height:100%;
      filter: blur(2px);
    }
    p{
      position: absolute;
      .px2rem(top,60);
      left:10%;
      width:80%;
      // .px2rem(margin-bottom,40);
      color:white;
      .px2rem(font-size,28);
      .px2rem(line-height,37);
    }
  }
  div:last-child{
    .px2rem(margin-left,10);
    padding-right:0;
  }
}
.recommended1{
  .px2rem(margin-left,30);
  .px2rem(margin-right,30);
  border-bottom:1px solid #ccc;
  img{
    display: block;
    width:100%;
    .px2rem(margin-bottom,30);
    .px2rem(border-radius,10);
  }
}
</style>
